<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>战斗展示页面</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: white;
            overflow-x: auto;
        }

        .battle-container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .battle-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .battle-header h1 {
            margin: 0;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            background: linear-gradient(45deg, #ff6b6b, #ffd93d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .battlefield {
            position: relative;
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background: linear-gradient(45deg, #2c3e50, #34495e);
            border: 3px solid #ecf0f1;
            border-radius: 10px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(6, 1fr);
            gap: 2px;
            padding: 10px;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .grid-cell {
            border: 1px dashed rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            position: relative;
        }

        .character {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .character:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        }

        .player-team {
            background: linear-gradient(135deg, #3498db, #2980b9);
            border: 3px solid #1abc9c;
        }

        .enemy-team {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            border: 3px solid #e67e22;
        }

        .dead {
            opacity: 0.3;
            background: linear-gradient(135deg, #7f8c8d, #95a5a6) !important;
            border-color: #bdc3c7 !important;
        }

        .hp-bar {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 6px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 3px;
            overflow: hidden;
        }

        .hp-fill {
            height: 100%;
            background: linear-gradient(90deg, #e74c3c, #f39c12, #2ecc71);
            transition: width 0.5s ease;
            border-radius: 3px;
        }

        .damage-number {
            position: absolute;
            font-size: 18px;
            font-weight: bold;
            color: #ff4757;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            pointer-events: none;
            z-index: 100;
            animation: damageFloat 2s ease-out forwards;
        }

        .heal-number {
            color: #2ed573;
        }

        .crit-damage {
            color: #ffa502;
            font-size: 24px;
            text-shadow: 0 0 10px #ffa502;
        }

        .miss-text {
            color: #747d8c;
            font-size: 16px;
        }

        @keyframes damageFloat {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            50% {
                transform: translateY(-30px) scale(1.2);
                opacity: 1;
            }
            100% {
                transform: translateY(-60px) scale(0.8);
                opacity: 0;
            }
        }

        .controls {
            text-align: center;
            margin: 30px 0;
        }

        .btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: none;
            color: white;
            padding: 12px 24px;
            margin: 0 10px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .round-info {
            text-align: center;
            margin: 20px 0;
            font-size: 18px;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px 20px;
            border-radius: 20px;
            display: inline-block;
        }

        .character-info {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px;
            border-radius: 10px;
            min-width: 200px;
            display: none;
        }

        .character-info h3 {
            margin: 0 0 10px 0;
            color: #3498db;
        }

        .character-info p {
            margin: 5px 0;
            font-size: 14px;
        }

        /* 高亮效果 */
        .attacker-highlight {
            box-shadow: 0 0 15px 3px #ff4444 !important;
            border: 2px solid #ff4444 !important;
            animation: attackerPulse 0.5s ease-in-out infinite alternate;
        }

        .target-highlight {
            box-shadow: 0 0 15px 3px #ffaa00 !important;
            border: 2px solid #ffaa00 !important;
            animation: targetPulse 0.5s ease-in-out infinite alternate;
        }

        @keyframes attackerPulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.05); }
        }

        @keyframes targetPulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.03); }
        }

        /* 技能释放效果 */
        .skill-cast-effect {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 15;
            animation: castPulse 1s ease-out;
        }

        .fire-cast {
            background: radial-gradient(circle, #ff1744, #d50000);
            box-shadow: 0 0 15px #ff1744;
        }

        .ice-cast {
            background: radial-gradient(circle, #00bcd4, #0097a7);
            box-shadow: 0 0 15px #00bcd4;
        }

        .heal-cast {
            background: radial-gradient(circle, #4caf50, #388e3c);
            box-shadow: 0 0 15px #4caf50;
        }

        .attack-cast {
            background: radial-gradient(circle, #ff9800, #f57c00);
            box-shadow: 0 0 15px #ff9800;
        }

        @keyframes castPulse {
            0% {
                transform: scale(0.5);
                opacity: 1;
            }
            50% {
                transform: scale(1.2);
                opacity: 0.8;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        /* 技能目标效果 */
        .skill-effect {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 50;
        }

        .fireball-effect {
            background: radial-gradient(circle, #ff6b6b, #ff4757);
            animation: skillPulse 1s ease-out;
        }

        .ice-effect {
            background: radial-gradient(circle, #74b9ff, #0984e3);
            animation: skillPulse 1s ease-out;
        }

        .heal-effect {
            background: radial-gradient(circle, #66bb6a, #4caf50);
            animation: skillPulse 1s ease-out;
        }

        .attack-effect {
            background: radial-gradient(circle, #fdcb6e, #e17055);
            animation: skillPulse 0.8s ease-out;
        }

        @keyframes skillPulse {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            50% {
                transform: scale(1.2);
                opacity: 0.8;
            }
            100% {
                transform: scale(0);
                opacity: 0;
            }
        }

        .loading {
            text-align: center;
            font-size: 18px;
            margin: 20px 0;
        }

        .error {
            color: #e74c3c;
            text-align: center;
            font-size: 16px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="battle-container">
        <div class="battle-header">
            <h1>⚔️ 战斗回放系统 ⚔️</h1>
        </div>

        <div class="loading" id="loading">正在加载战斗数据...</div>
        <div class="error" id="error" style="display: none;"></div>

        <div class="round-info" id="roundInfo" style="display: none;">
            第 1 回合
        </div>

        <div class="battlefield" id="battlefield" style="display: none;">
            <!-- 战场网格将由JavaScript生成 -->
        </div>

        <div class="controls" id="controls" style="display: none;">
            <button class="btn" id="prevBtn" onclick="previousRound()">⏮️ 上一回合</button>
            <button class="btn" id="playBtn" onclick="togglePlay()">▶️ 播放</button>
            <button class="btn" id="nextBtn" onclick="nextRound()">⏭️ 下一回合</button>
            <button class="btn" onclick="resetBattle()">🔄 重置</button>
        </div>

        <div class="character-info" id="characterInfo">
            <h3 id="charName">角色信息</h3>
            <p id="charHP">生命值: </p>
            <p id="charPos">位置: </p>
            <p id="charStatus">状态: </p>
        </div>
    </div>

    <script>
        let battleData = null;
        let currentRound = 0;
        let isPlaying = false;
        let playInterval = null;
        let characters = {};
        let actionIndex = 0;

        // 加载战斗数据
        async function loadBattleData() {
            try {
                const response = await fetch('./battle_4v4_result.json');
                if (!response.ok) {
                    throw new Error('无法加载战斗数据文件');
                }
                battleData = await response.json();
                document.getElementById('loading').style.display = 'none';
                initializeBattle();
            } catch (error) {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('error').style.display = 'block';
                document.getElementById('error').textContent = '错误: ' + error.message;
                console.error('加载战斗数据失败:', error);
            }
        }

        // 初始化战斗
        function initializeBattle() {
            if (!battleData) return;

            createBattlefield();
            createCharacters();
            updateRoundInfo();
            showBattleElements();
        }

        // 显示战斗元素
        function showBattleElements() {
            document.getElementById('battlefield').style.display = 'grid';
            document.getElementById('controls').style.display = 'block';
            document.getElementById('roundInfo').style.display = 'inline-block';
        }

        // 创建战场网格
        function createBattlefield() {
            const battlefield = document.getElementById('battlefield');
            battlefield.innerHTML = '';
            
            // 创建6x4网格
            for (let y = 0; y < 6; y++) {
                for (let x = 0; x < 4; x++) {
                    const cell = document.createElement('div');
                    cell.className = 'grid-cell';
                    cell.dataset.x = x;
                    cell.dataset.y = y;
                    battlefield.appendChild(cell);
                }
            }
        }

        // 创建角色
        function createCharacters() {
            const battlefield = document.getElementById('battlefield');
            characters = {};

            // 创建玩家队伍角色
            battleData.teams.player_team.forEach(char => {
                const charElement = createCharacterElement(char, 'player-team');
                // 将角色添加到对应的网格单元格
                const gridX = parseInt(charElement.dataset.gridX);
                const gridY = parseInt(charElement.dataset.gridY);
                const targetCell = battlefield.querySelector(`[data-x="${gridX}"][data-y="${gridY}"]`);
                if (targetCell) {
                    targetCell.appendChild(charElement);
                }
                characters[char.id] = {
                    element: charElement,
                    data: char,
                    currentHP: char.initial_stats.hp
                };
            });

            // 创建敌方队伍角色
            battleData.teams.enemy_team.forEach(char => {
                const charElement = createCharacterElement(char, 'enemy-team');
                // 将角色添加到对应的网格单元格
                const gridX = parseInt(charElement.dataset.gridX);
                const gridY = parseInt(charElement.dataset.gridY);
                const targetCell = battlefield.querySelector(`[data-x="${gridX}"][data-y="${gridY}"]`);
                if (targetCell) {
                    targetCell.appendChild(charElement);
                }
                characters[char.id] = {
                    element: charElement,
                    data: char,
                    currentHP: char.initial_stats.hp
                };
            });
        }

        // 创建角色元素
        function createCharacterElement(char, teamClass) {
            const element = document.createElement('div');
            element.className = `character ${teamClass}`;
            element.dataset.charId = char.id;
            element.innerHTML = `
                <div style="font-size: 10px; line-height: 1.2;">
                    ${char.name}
                </div>
                <div class="hp-bar">
                    <div class="hp-fill" style="width: 100%;"></div>
                </div>
            `;

            // 从battlefield数据中获取位置
            let position = null;
            if (teamClass === 'player-team' && battleData.battlefield.player_positions[char.id]) {
                position = battleData.battlefield.player_positions[char.id];
            } else if (teamClass === 'enemy-team' && battleData.battlefield.enemy_positions[char.id]) {
                position = battleData.battlefield.enemy_positions[char.id];
            }

            if (position) {
                // 将角色添加到对应的网格单元格中
                element.dataset.gridX = position.x;
                element.dataset.gridY = position.y;
            }

            // 添加点击事件
            element.addEventListener('click', () => showCharacterInfo(char));

            return element;
        }

        // 显示角色信息
        function showCharacterInfo(char) {
            const info = document.getElementById('characterInfo');
            const charData = characters[char.id];
            
            // 从battlefield数据中获取位置
            let position = null;
            if (battleData.battlefield.player_positions[char.id]) {
                position = battleData.battlefield.player_positions[char.id];
            } else if (battleData.battlefield.enemy_positions[char.id]) {
                position = battleData.battlefield.enemy_positions[char.id];
            }
            
            document.getElementById('charName').textContent = char.name;
            document.getElementById('charHP').textContent = 
                `生命值: ${charData.currentHP}/${char.initial_stats.hp}`;
            document.getElementById('charPos').textContent = 
                position ? `位置: (${position.x}, ${position.y})` : '位置: 未知';
            document.getElementById('charStatus').textContent = 
                `状态: ${charData.currentHP > 0 ? '存活' : '阵亡'}`;
            
            info.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                info.style.display = 'none';
            }, 3000);
        }

        // 更新回合信息
        function updateRoundInfo() {
            const roundInfo = document.getElementById('roundInfo');
            if (currentRound === 0) {
                roundInfo.textContent = '战斗开始前';
            } else if (currentRound <= battleData.battle_results.length) {
                roundInfo.textContent = `第 ${currentRound} 回合`;
            } else {
                roundInfo.textContent = '战斗结束';
            }
        }

        // 播放当前回合
        function playCurrentRound() {
            if (currentRound === 0 || currentRound > battleData.battle_results.length) {
                return;
            }

            const round = battleData.battle_results[currentRound - 1];
            actionIndex = 0;
            playNextAction(round);
        }

        // 播放下一个动作
        function playNextAction(round) {
            if (actionIndex >= round.actions.length) {
                // 回合结束，更新角色状态
                updateCharacterStates(round);
                return;
            }

            const action = round.actions[actionIndex];
            actionIndex++;

            // 播放动作，并在完成后播放下一个动作
            playAction(action, () => {
                // 动作播放完成后，等待1500ms再播放下一个动作，确保有足够的空白时间
                setTimeout(() => playNextAction(round), 4000);
            });
        }

        // 播放单个动作
        function playAction(action, onComplete) {
            const attacker = characters[action.character_id];
            if (!attacker) {
                if (onComplete) onComplete();
                return;
            }

            // 第一阶段：高亮攻击者并显示技能释放效果（持续时间：1000ms）
            highlightAttacker(attacker.element);
            showSkillCastEffect(action, attacker);

            // 第二阶段：显示技能目标效果和高亮所有目标（延迟800ms开始）
            setTimeout(() => {
                showSkillEffect(action);
                
                // 同时高亮所有被攻击目标（群体技能一次性显示所有目标）
                action.effects.forEach(effect => {
                    const target = characters[effect.target_id];
                    if (target) {
                        highlightTarget(target.element);
                    }
                });
            }, 800);

            // 第三阶段：同时显示所有伤害/治疗效果（延迟1200ms开始，群体效果同时播放）
            setTimeout(() => {
                action.effects.forEach(effect => {
                    if (effect.effect_type === 'damage') {
                        showDamage(effect);
                    } else if (effect.effect_type === 'heal') {
                        showHeal(effect);
                    }
                });
            }, 1200);

            // 第四阶段：清除高亮效果并完成动作（总持续时间：3500ms）
            setTimeout(() => {
                clearHighlights();
                // 动作播放完成，调用回调函数
                if (onComplete) onComplete();
            }, 3500);
        }

        // 高亮攻击者
        function highlightAttacker(element) {
            element.classList.add('attacker-highlight');
        }

        // 高亮被攻击目标
        function highlightTarget(element) {
            element.classList.add('target-highlight');
        }

        // 清除所有高亮效果
        function clearHighlights() {
            document.querySelectorAll('.attacker-highlight, .target-highlight').forEach(el => {
                el.classList.remove('attacker-highlight', 'target-highlight');
            });
        }

        // 显示技能释放效果（在攻击者位置）
        function showSkillCastEffect(action, attacker) {
            const battlefield = document.getElementById('battlefield');
            const castEffect = document.createElement('div');
            castEffect.className = 'skill-cast-effect';
            
            // 根据技能类型设置效果
            if (action.skill_id.includes('fire')) {
                castEffect.classList.add('fire-cast');
            } else if (action.skill_id.includes('ice')) {
                castEffect.classList.add('ice-cast');
            } else if (action.skill_id.includes('heal')) {
                castEffect.classList.add('heal-cast');
            } else {
                castEffect.classList.add('attack-cast');
            }

            // 设置在攻击者位置
            const rect = attacker.element.getBoundingClientRect();
            const battlefieldRect = battlefield.getBoundingClientRect();
            castEffect.style.left = (rect.left - battlefieldRect.left + 40 - 25) + 'px';
            castEffect.style.top = (rect.top - battlefieldRect.top + 40 - 25) + 'px';

            battlefield.appendChild(castEffect);

            // 1秒后移除效果
            setTimeout(() => {
                if (castEffect.parentNode) {
                    castEffect.parentNode.removeChild(castEffect);
                }
            }, 1000);
        }

        // 显示技能效果（在目标位置）
        function showSkillEffect(action) {
            const battlefield = document.getElementById('battlefield');
            
            // 为每个受影响的目标显示效果
            action.effects.forEach(effect => {
                const target = characters[effect.target_id];
                if (!target) return;

                const skillEffect = document.createElement('div');
                skillEffect.className = 'skill-effect';
                
                // 根据技能类型设置效果
                if (action.skill_id.includes('fire')) {
                    skillEffect.classList.add('fireball-effect');
                } else if (action.skill_id.includes('ice')) {
                    skillEffect.classList.add('ice-effect');
                } else if (effect.effect_type === 'heal') {
                    skillEffect.classList.add('heal-effect');
                } else {
                    skillEffect.classList.add('attack-effect');
                }

                // 设置在目标位置
                const rect = target.element.getBoundingClientRect();
                const battlefieldRect = battlefield.getBoundingClientRect();
                skillEffect.style.left = (rect.left - battlefieldRect.left + 40 - 50) + 'px';
                skillEffect.style.top = (rect.top - battlefieldRect.top + 40 - 50) + 'px';

                battlefield.appendChild(skillEffect);

                // 1秒后移除效果
                setTimeout(() => {
                    if (skillEffect.parentNode) {
                        skillEffect.parentNode.removeChild(skillEffect);
                    }
                }, 1000);
            });
        }

        // 显示伤害数字
        function showDamage(effect) {
            const target = characters[effect.target_id];
            if (!target) return;

            const damageElement = document.createElement('div');
            damageElement.className = 'damage-number';
            
            if (effect.is_crit) {
                damageElement.classList.add('crit-damage');
                damageElement.textContent = `${effect.value}!`;
            } else if (effect.is_dodged || !effect.is_hit) {
                damageElement.classList.add('miss-text');
                damageElement.textContent = 'MISS';
            } else {
                damageElement.textContent = `-${effect.value}`;
            }

            // 设置位置
            const rect = target.element.getBoundingClientRect();
            const battlefield = document.getElementById('battlefield');
            const battlefieldRect = battlefield.getBoundingClientRect();
            
            damageElement.style.left = (rect.left - battlefieldRect.left + 40) + 'px';
            damageElement.style.top = (rect.top - battlefieldRect.top + 20) + 'px';

            battlefield.appendChild(damageElement);

            // 实时更新角色生命值
            if (!effect.is_dodged && effect.is_hit && effect.value > 0) {
                target.currentHP = Math.max(0, target.currentHP - effect.value);
                updateCharacterHP(target);
            }

            // 2秒后移除伤害数字
            setTimeout(() => {
                if (damageElement.parentNode) {
                    damageElement.parentNode.removeChild(damageElement);
                }
            }, 2000);
        }

        // 显示治疗数字
        function showHeal(effect) {
            const target = characters[effect.target_id];
            if (!target) return;

            const healElement = document.createElement('div');
            healElement.className = 'damage-number heal-number';
            healElement.textContent = `+${effect.value}`;

            // 设置位置
            const rect = target.element.getBoundingClientRect();
            const battlefield = document.getElementById('battlefield');
            const battlefieldRect = battlefield.getBoundingClientRect();
            
            healElement.style.left = (rect.left - battlefieldRect.left + 40) + 'px';
            healElement.style.top = (rect.top - battlefieldRect.top + 20) + 'px';

            battlefield.appendChild(healElement);

            // 实时更新角色生命值
            if (effect.value > 0) {
                const maxHP = target.data.initial_stats.hp;
                target.currentHP = Math.min(maxHP, target.currentHP + effect.value);
                updateCharacterHP(target);
            }

            // 2秒后移除治疗数字
            setTimeout(() => {
                if (healElement.parentNode) {
                    healElement.parentNode.removeChild(healElement);
                }
            }, 2000);
        }

        // 更新角色生命值显示
        function updateCharacterHP(character) {
            const hpFill = character.element.querySelector('.hp-fill');
            const hpPercentage = (character.currentHP / character.data.initial_stats.hp) * 100;
            hpFill.style.width = hpPercentage + '%';

            // 如果生命值为0，标记为死亡
            if (character.currentHP <= 0) {
                character.element.classList.add('dead');
            } else {
                character.element.classList.remove('dead');
            }
        }

        // 更新角色状态
        function updateCharacterStates(round) {
            // 同步角色生命值和状态，确保与服务器数据一致
            round.character_states.forEach(state => {
                const character = characters[state.character_id];
                if (character) {
                    character.currentHP = state.hp;
                    updateCharacterHP(character);
                }
            });
        }

        // 控制函数
        function nextRound() {
            if (currentRound < battleData.battle_results.length) {
                currentRound++;
                updateRoundInfo();
                playCurrentRound();
            }
            updateButtons();
        }

        function previousRound() {
            if (currentRound > 0) {
                currentRound--;
                updateRoundInfo();
                // 重置到该回合状态
                resetToRound(currentRound);
            }
            updateButtons();
        }

        function togglePlay() {
            const playBtn = document.getElementById('playBtn');
            if (isPlaying) {
                clearInterval(playInterval);
                isPlaying = false;
                playBtn.textContent = '▶️ 播放';
            } else {
                isPlaying = true;
                playBtn.textContent = '⏸️ 暂停';
                playInterval = setInterval(() => {
                    if (currentRound < battleData.battle_results.length) {
                        nextRound();
                    } else {
                        togglePlay();
                    }
                }, 3000);
            }
        }

        function resetBattle() {
            currentRound = 0;
            isPlaying = false;
            clearInterval(playInterval);
            document.getElementById('playBtn').textContent = '▶️ 播放';
            
            // 重置所有角色状态
            Object.values(characters).forEach(char => {
                char.currentHP = char.data.initial_stats.hp;
                updateCharacterHP(char);
            });
            
            updateRoundInfo();
            updateButtons();
        }

        function resetToRound(roundNum) {
            // 重置所有角色到初始状态
            Object.values(characters).forEach(char => {
                char.currentHP = char.data.initial_stats.hp;
                updateCharacterHP(char);
            });

            // 应用到指定回合的所有状态变化
            for (let i = 0; i < roundNum; i++) {
                if (battleData.battle_results[i] && battleData.battle_results[i].round_end_stats) {
                    updateCharacterStates(battleData.battle_results[i]);
                }
            }
        }

        function updateButtons() {
            document.getElementById('prevBtn').disabled = currentRound <= 0;
            document.getElementById('nextBtn').disabled = currentRound >= battleData.battle_results.length;
        }

        // 页面加载时初始化
        window.addEventListener('load', loadBattleData);
    </script>
</body>
</html>